<template>
	<el-container :direction="vertical">
		<el-header height="56px">
			<span class="title"> | 题库列表</span>
			<span>
				<el-button type="default" size="mini" class="but">
					<i class="el-icon-refresh"></i> 刷新
				</el-button>
			</span>
			<span class="help">
				<i class="el-icon-question"></i>帮助
			</span>
		</el-header>

		<el-container direction="vertical" class="list-content">
			<el-main id="search">
				<div>
					<el-select v-model="form" class="time">
						<el-option label="创建时间" value="createdAt"></el-option>
						<el-option label="更新时间" value="createdAt"></el-option>
					</el-select>
					<span>-</span>
					<el-date-picker v-model="form" type="datetime" placeholder="选择日期时间" default-time="12:00:00"></el-date-picker>

					<span>-</span>

					<el-date-picker v-model="form" type="datetime" placeholder="选择日期时间" default-time="12:00:00"></el-date-picker>

					<el-button type="primary" size="mini" class="qingchu">清除</el-button>
					<el-button type="primary" size="mini" class="huishouzhan">回收站文件</el-button>
				</div>

				<div>
					<el-select class="kemu" v-model="selectList.subject" placeholder="科目" clearable filterable>
						<el-option
							v-for="item in subjectList"
							:key="item.subjectuuid"
							:label="item.subjectname"
							:value="item.subjecttypes"
						></el-option>
					</el-select>

					<el-select
						class="tixing"
						v-model="selectList.questionType"
						placeholder="题型"
						clearable
						filterable
					>
						<el-option
							v-for="item in questionTypeList"
							:key="item.testquestionsuid"
							:label="item.testquestionsname"
							:value="item.typesnum"
						></el-option>
					</el-select>

					<el-select class="tixing" v-model="search.stagetypes" placeholder="难易程度" clearable filterable>
						<el-option
							v-for="item in difficultyList"
							:key="item.stageuuid"
							:label="item.stagename"
							:value="item.stagetypes"
						></el-option>
					</el-select>

					<el-button type="primary" size="default" class="chaxun" @click="handleSelect">查询</el-button>
				</div>
			</el-main>
		</el-container>

		<el-table :data="questionList" border stripe>
			<el-table-column type="selection" label="全选" width="80"></el-table-column>
			<el-table-column type="index" label="编号" width="80" :index="indexMethod"></el-table-column>
			<el-table-column label="题干" prop="filltopic"></el-table-column>
			<el-table-column label="题型" prop="filltopic">
				<template slot-scope="scope">
					<!-- scope 代表表格绑定数组 -->
					<!-- scope.row 绑定数组的元素 -->
					{{scope.row.questiontypes | filterQuestiontypes (that)}}
				</template>
			</el-table-column>
			<el-table-column label="科目" prop="filltopic"></el-table-column>
			<el-table-column label="难易程度" prop="difficultytypes"></el-table-column>
			<el-table-column label="创建时间" prop="filltopic"></el-table-column>
			<el-table-column label="操作" prop="filltopic">
				<el-button type="primary" size="default">查看</el-button>
				<span> | </span>
				<el-button type="primary" size="default">修改</el-button>
			</el-table-column>
			<el-table-column label="删除" prop="filltopic">
				<el-button type="danger" size="mini">删除</el-button>
			</el-table-column>
		</el-table>

		<!-- 分页器 -->
		<el-pagination
			@size-change="sizeChange"
			@current-change="currentChange"
			:current-page.sync="pageNum"
			:page-sizes="[10, 30, 50]"
			:page-size="pageSize"
			layout="total, sizes, prev, pager, next, jumper"
			:total="total"
			:pager-count="7"
		></el-pagination>
	</el-container>
</template>

<script>
export default {
	data() {
		return {
			that: this,
			vertical: "vertical",
			questionTypeList: [], // 题型列表
			subjectList: [], // 科目列表
			difficultyList: [], // 难以程度列表
			questionList: [], // 试题列表
			total: 0, // 试题总数
			pageNum: 1, //当前页码
			pageSize: 10, // 每页显示的数量
			form: {},
			selectList: {},
			search: {},
			column: [{}, {}]
		};
	},
	filters: {
		filterQuestiontypes(type, that) {
			// that 是 vue组件 实例
			for(let i=0; i < that.questionTypeList.length; i++){
				// typesnum 是试题类型
				if(type == that.questionTypeList[i].typesnum) {
					// testquestionnsname 类型对应的名称
					return that.questionTypeList[i].questiontname;
				}
			}
 		}
	},
	async created() {
		// 获取数据：题型 科目 难易程度
		await this.getQuestionTypeList();
		await this.getSubjectList();
		await this.getDifficutyList();

		// 获取试题列表
		await this.getQuestionList();
		console.log();
	},
	methods: {
		// 获取题型列表
		async getQuestionTypeList() {
			this.$axios({
				url: "/system/sqTestquestionstypes/selTestquestions",
				method: "get"
			}).then(res => {
				if (res.data.code === 1) {
					this.question = res.data.data;
				}
			});
		},
		// 获取所属科目
		async getSubjectList() {
			await this.$axios({
				url: "/system/sqSubjecttable/selSubject",
				method: "get"
			}).then(res => {
				if (res.data.code === 1) {
					this.subjectList = res.data.data;
				}
			});
		},
		// 获取题目的难易程度
		async getDifficutyList() {
			await this.$axios({
				url: "/system/sqStagetypes/selstagetypes",
				method: "get"
			}).then(res => {
				if (res.data.code === 1) {
					this.difficultyList = res.data.data;
				}
			});
		},
		// 获取试题列表
		async getQuestionList(pageNum = 1, pageSize = 10) {
			let selectStr = "";
			// 拼接查询条件
			selectStr += `?pageNum=${pageNum}&pageSize=${pageSize}&`;
			await this.$axios({
				url: `system/sqTestquestionstypes/selectByConditionshortanswer${selectStr}`,
				method: "get"
			}).then(res => {
				// res.data.data 值为1 后台响应正确结果
				if (res.data.code === 1) {
					this.questionList = res.data.data.allNums;
					this.total = res.data.data.total;
				}
			});
		},
		// 表格自定义编号 第一页从1开始，第二页从11开始
		indexMethod(index) {
			// index 是数组的索引
			// (pageNum-1) * pageSize + (index+1)
			return (this.pageNum - 1) * this.pageSize + (index + 1);
		},
		// 按条件查询
		handleSelect() {},
		// 每页显示总条数变化
		sizeChange(val) {
			// 当前每页显示数据条数
			this.pageSize = val;
			// 调取数据
			this.getQuestionList(this.pageNum, this.pageSize);
		},
		// 页码发生变化
		currentChange(currentPage) {
			// currentPage 当前页码
			this.pageNum = currentPage;
			// 调取数据
			this.getQuestionList(this.pageNum, this.pageSize);
		}
	}
};
</script>

<style>
.el-main {
	border: 22px solid #edeef2;
}
.title {
	margin-left: 16px;
	/* margin-top: 10px; */
	color: #fff;
	line-height: 74px;
}
.but {
	margin-left: 1380px;
}
.help {
	margin-left: 20px;
	color: #023785;
}
.time {
	margin-left: 50px;
}
.qingchu {
	margin-left: 22px;
	border: none;
	background-color: #f9463f;
}

.huishouzhan {
	width: 288px;
	height: 40px;
	background-color: #ffffff;
	border: 1px solid #d9d9d9;
	color: #000;
	position: absolute;
	top: 163px;
	left: 1520px;
}
.kemu {
	margin-top: 22px;
	margin-left: 50px;
}
.tixing {
	margin-left: 24px;
}
.chaxun {
	margin-left: 28px;
	background-color: #033886;
	border: 1px solid #033886;
}
.content {
	margin-top: 45px;
	margin-left: 76px;
}
.che {
	width: 16px;
	height: 16px;
	border: 1px solid #dddddd;
}
.che-span {
	margin-left: 10px;
}
.del {
	background-color: #033886;
	color: white;
	width: 75px;
	height: 35px;
	border: 1px solid #d9d9d9;
	margin-left: 95px;
}
.jiaru {
	background-color: #033886;
	color: white;
	width: 124px;
	height: 35px;
	border: 1px solid #d9d9d9;
	margin-left: 10px;
}
.el-pagination {
	width: 750px;
	margin-top: 50px;
	margin-left: 630px;
}
</style>
